<template>
  <div>
    <el-table
      :data="curData"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      highlight-current-row
      stripe
      style="border: 1px solid #dfe6ec"
      :row-key="recordId"
      ref="multipleTable"
      v-loading="loading"
    >
      <el-table-column
        v-if="isShowType"
        prop="newName"
        label="附件类型"
        align="left"
        :formatter="formatTd"
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="上传时间"
        align="center"
        width="180"
      ></el-table-column>
      <el-table-column prop="name,url" label="附件名称" min-width="260">
        <template slot-scope="scope">
          <copyText
            v-if="scope.row.name"
            :tableIndex="scope.$index"
            :copyTextName="scope.row.name"
            :columnName="'name'"
          ></copyText>
          <copyText
            v-else
            :tableIndex="scope.$index"
            :copyTextName="getName(scope.row.url)"
            :columnName="'url'"
          ></copyText>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="格式"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          {{
            getFileType(
              scope.row.name || scope.row.originalName || getName(scope.row.url)
            )
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160px">
        <template slot-scope="scope">
          <!-- <el-link type="primary" v-if='!checkPDF(scope.row.name)' @click="checkLook(scope.row.url)">查看</el-link> -->
          <el-link type="primary" @click="download(scope.row)"
            >下载附件</el-link
          >
          <el-link
            type="primary"
            v-if="!checkImg(scope.row)"
            @click="lookResult(scope.row.url)"
            >查看</el-link
          >
          <span class="inline-block previewBox">
            <el-link
              type="primary"
              v-if="checkImg(scope.row)"
              @click="checkLook(scope.row.url)"
              >查看</el-link
            >
            <el-image
              class="previewImg"
              style="width: 56px; height: 0px"
              :src="src"
              :preview-src-list="[src]"
              id="publicSignBox"
            ></el-image>
          </span>
          <el-link
            type="primary"
            @click="toDel(scope.$index, scope.row)"
            v-if="isDel"
            >删除</el-link
          >
        </template>
      </el-table-column>
      <div slot="empty" class="emptyBg">
        <p>暂无附件</p>
      </div>
    </el-table>

    <!-- <el-pagination class="contractPag" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo" :page-size="pageSize" :page-sizes="[5, 10, 15, 20]" layout="prev, pager, next, jumper,sizes" :total="tableData.length">
        </el-pagination> -->
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      curData: [],
      centerDialogVisible: false,
      src: '',
    }
  },
  props: {
    tableData: {
      type: Array,
    },
    isDel: {
      type: Boolean,
    },
    isShowType: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    lookResult(url) {
      window.open(url)
    },
    checkLook(url) {
      this.src = url
      setTimeout(() => {
        $('#publicSignBox').click()
      }, 300)
    },
    download(item) {
      // window.open(item.url);
      window.open(
        common.commonApi +
          'api-f/files/downloadtolocal?url=' +
          item.path +
          '&fileName=' +
          item.name
      )
    },
    getFileType(file) {
      if (file) {
        const fileName = file.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
        const fileNameLen = file.length // 取到文件名长度
        const fileType = file.substring(fileName + 1, fileNameLen) // 截
        return '.' + fileType
      }
    },
    checkImg(item) {
      var str = item.name || this.getName(item.url)
      if (str) {
        let arr = str.split('.')
        let name = arr[arr.length - 1]
        if (['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG'].includes(name)) {
          return true
        }
      }
      return false
    },
    handleSizeChange(val) {
      this.pageNo = 1
      this.pageSize = val
      this.curData = this.tableData.slice(0, this.pageNo * this.pageSize)
    },
    handleCurrentChange(val) {
      this.pageNo = val
      this.curData = this.tableData.slice(
        (this.pageNo - 1) * this.pageSize,
        this.pageNo * this.pageSize
      )
    },
    toDel(index) {
      this.$confirm('此操作将永久删除该附件，是否继续?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.del1(index)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    del1(index) {
      this.tableData.splice(index, 1)
      this.$emit('changeFileList', this.tableData)
    },
    getName(url) {
      if (url) {
        const fileName = url.lastIndexOf('/') // 取到文件名开始到最后一个点的长度
        const fileNameLen = url.length // 取到文件名长度
        const fileType = url.substring(fileName + 1, fileNameLen) // 截
        return fileType
      }
    },
  },
  watch: {
    tableData: {
      handler: function (val) {
        this.curData = this.tableData.slice(0, this.pageNo * this.pageSize)
      },
      deep: true,
      immediate: true,
    },
    // tableData(val) {
    //     console.log(val)
    //     this.curData = this.tableData.slice(0, this.pageNo * this.pageSize);
    // }
  },
}
</script>
<style lang="less" scoped>
.contractPag {
  text-align: right;
  margin-top: 24px;
}
.inline-block {
  display: inline-block;
}
.previewBox {
  // width: 56px;
  // height: 20px;
  position: relative;
  .previewImg {
    position: absolute;
    top: 25px;
    left: 0;
    cursor: pointer;
    /deep/.el-image__preview {
      opacity: 1;
    }
  }
  /deep/.el-upload-list {
    display: none;
  }
}
</style>
